<template>
	<view style="height: 100%; background-color: skyblue;">
		<view class="layout1">
			<block v-if="hasUserInfo === false">
				<image class="userinfo-avatar" src="../../../static/weapp/ic_header.png"></image>
				<view class="login-txt" @click="login">一键登录</view>
			</block>
			<block v-if="hasUserInfo === true">
				<image class="userinfo-avatar" :src="avatarUrl"></image>
				<view class="user-info">
					<view class="user-name">{{this.userName}}</view>
					<view class="user-phone">{{this.phoneNumber}}</view>
				</view>
				<button class="user-button" @click="gotoEditPage">修改资料</button>
			</block>
		</view>
		<view v-if="showPhoneDialog" class="popup_content">
			<view class="text1">绑定手机号</view>
			<view class="text2">请先绑定手机号再进行操作</view>
			<button type="primary" class="button-phone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户一键绑定</button>
		</view>
		<view v-if="showPhoneDialog" class="popup_overlay"></view>
		<view class="layout2">
			<block v-if="hasUserInfo === true">
			    <view class="logout" @click="logout">退出登录</view>
			</block>
			<view class="item-layout" @click="gotoOrderPage">
				<view class="item-text">我的订单</view>
				<text class="item-icon">&#xe470;</text>
			</view>
			<view class="item-layout" @click="gotoAddressPage">
				<view class="item-text">我的地址</view>
				<text class="item-icon">&#xe470;</text>
			</view>
			<view class="item-layout" @click="gotoCouponPage">
				<view class="item-text">我的优惠券</view>
				<text class="item-icon">&#xe470;</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { http } from '@/common/service/service.js'
	import {ACCESS_TOKEN} from '@/common/constant.js'
	import { addressList } from '../user/address.js'
	
	export default {
		data() {
			return {
				hasUserInfo: false,
				showPhoneDialog: false,
				avatarUrl: null,
				userName: null,
				phoneNumber: null
			}
		},
		globalData: {
			clear: false
		},
		methods: {
			async login() {
				let promise1 = this.wxLogin();
				let promise2 = this.wxUser();
				
				Promise.all([promise1, promise2]).then(res =>{
					var loginRes = res[0];
					var userInfo = res[1];
					
					http.post('/sys/token', {
						'code': loginRes.code,
						'userName': userInfo.userInfo.nickName,
						'avatar': userInfo.userInfo.avatarUrl,
						'gender': userInfo.userInfo.gender,
						'country': userInfo.userInfo.country,
						'province': userInfo.userInfo.province,
						'city': userInfo.userInfo.city,
					}).then(async res => {
						var token = res.data.token;
						uni.setStorageSync(ACCESS_TOKEN, token)
						var result = await this.getUserInfo();
						if (result.code == 200) {
							var user = result.data;
							if (null == user.phone || '' == user.phone) {
								this.showPhoneDialog = true;
							} else {
								this.updateUserInfo(user);
							}
						}
					})
				})
			},
			
			async wxLogin() {
				return new Promise((resolve, reject) => {
					wx.login({
						success: (res) => {
							resolve(res)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			
			async wxUser() {
				return new Promise((resolve, reject) => {
					wx.getUserProfile({
						desc: '获取用户头像、昵称',
						success: (res) => {
							resolve(res)
						}
					})
				})
			},
			
			getPhoneNumber(e) {
				http.post('/sys/phone?code=' + e.detail.code).then(async res => {
					if (res.data.code == 200) {
						var result = await this.getUserInfo();
						if (result.code == 200) {
							this.updateUserInfo(result.data);
						}
					}
				})
				this.showPhoneDialog = false;
			},
			
			async getUserInfo() {
				return new Promise((resolve, reject) => {
					http.get('/sys/getUser').then(res => {
						resolve(res.data)
					})
				})
			},
			
			async getAddressList() {
				var res = await new Promise((resolve, reject) => {
					http.get('/address/list').then(res => {
						resolve(res.data)
					})
				})
				if (res.code == 200) {
					addressList.splice(0)
					for (var index in res.data) {
						var item = res.data[index];
						if (getApp().globalData.selected != null) {
							if (getApp().globalData.selected == item.id) {
								item.selected = true;
							}
						} else {
							if (item.isDefault) {
								item.selected = true;
								getApp().globalData.selected = item.id;
							}
						}
						addressList.push(item);
					}
				}
			},
			
			updateUserInfo(user) {
				let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/;
				this.avatarUrl = user.avatarUrl;
				this.userName = user.userName;
				if (null != user.phone) {
					this.phoneNumber = user.phone.replace(reg,"$1****$2");
				}
				this.hasUserInfo = true;
				this.getAddressList();
			},
			
			logout() {
				uni.showModal({
					content: "确定退出?",
					confirmText: "确定",
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							http.post('/logout').then(res => {
								console.log(res)
							})
							uni.removeStorageSync(ACCESS_TOKEN);
							this.hasUserInfo = false;
							getApp().globalData.selected = null;
							addressList.splice(0)
						}
					}
				})
			},
			
			gotoEditPage() {
				uni.navigateTo({
					url: '/pages/weapp/user/edit'
				})
			},
			
			gotoAddressPage() {
				if (this.hasUserInfo == false) {
					uni.showToast({
						title: '请先登录',
						icon: 'error'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/weapp/user/address-list'
				})
			},
			
			gotoCouponPage() {
				if (this.hasUserInfo == false) {
					uni.showToast({
						title: '请先登录',
						icon: 'error'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/weapp/coupon/coupon'
				})
			},
			
			gotoOrderPage() {
				if (this.hasUserInfo == false) {
					uni.showToast({
						title: '请先登录',
						icon: 'error'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/weapp/order/order'
				})
			},
			
			clear() {
				this.avatarUrl = null;
				this.userName = null;
				this.phoneNumber = null;
				this.hasUserInfo = false;
			}
		},
		
		async created() {
			var result = await this.getUserInfo();
			if (result.code == 200) {
				this.updateUserInfo(result.data);
			}
		},
		
		async onShow() {
			if (getApp().globalData.clear) {
				this.clear();
				getApp().globalData.clear = false;
			}
		}
	}
</script>

<style>
	.layout1 {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 15%;
	}
	.layout2 {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 85%;
		overflow-y: scroll;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: rgb(247, 247, 247);
	}
	.item-layout {
		display: flex;
		width: 100%;
		height: 30px;
		background-color: white;
		color: rgb(52, 52, 52);
		margin-top: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.item-text {
		font-size: 16px;
		vertical-align: middle;
		margin-left: 10px;
		margin-top: auto;
		margin-bottom: auto;
	}
	.item-icon {
		font-family: uniicons;
		font-size: 16px;
		margin-left: auto;
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 10px;
		justify-content: flex-end;
	}
	.logout {
		display: flex;
		position: fixed;
		width: 100%;
		bottom: 10px;
		font-size: 16px; 
		color: coral;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}
	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 480rpx;
		height: 300rpx;
		margin-left: -270rpx;
		margin-top: -270rpx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.text1 {
		font-size: 18px;
		text-align: center;
		margin-top: 10px;
	}
	.text2 {
		font-size: 14px;
		color: gainsboro;
		text-align: center;
		margin-top: 10px;
	}
	.button-phone {
		font-size: 16px;
		color: white;
		width: 80%;
		margin-top: 10px;
	}
	.userinfo-avatar {
		border-radius: 128rpx;
		width: 128rpx;
		height: 128rpx;
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 10px;
	}
	.login-txt {
		font-size: 16px;
		color: gray;
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 10px;
	}
	.user-info {
		display: flex;
		flex-direction: column;
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 10px;
		color: white;
	}
	.user-info>.user-name {
		font-size: 16px;
	}
	.user-info>.user-phone {
		font-size: 14px;
		margin-top: 5px;
	}
	.user-button {
		font-size: 12px;
		color: white;
		background-color: transparent;
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 10px;
		border-color: white;
		border-style: solid;
		border-width: 1px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
</style>